<template>
  <ContentContainer inner :pagination="false" :refresh="false">
    <template #header>
      <a-alert>
        1.仅供 L1 节点作为来访端口使用;<br />
        2.HTTP、HTTPS 分别固定开启 80 、443 端口，系统保留端口 8888;<br />
        3.其它可用端口范围为 1024 至 65535，各端口范围不得重叠;<br />
        4.多个端口用换行分隔
      </a-alert>
    </template>
    <a-form :model="formState" layout="vertical" class="w-100!">
      <a-form-item label="HTTP 端口">
        <a-textarea
          v-model="formState.http"
          :auto-size="{ maxRows: 5, minRows: 5 }"
          placeholder="例如：
4015
4016-4085"></a-textarea>
      </a-form-item>
      <a-form-item label="HTTPS 端口">
        <a-textarea
          v-model="formState.https"
          :auto-size="{ maxRows: 5, minRows: 5 }"
          placeholder="例如：
5015
5016-5085"></a-textarea>
      </a-form-item>
      <a-button type="primary" class="w-fit" @click="save">保存配置</a-button>
    </a-form>
  </ContentContainer>
</template>
<script lang="ts" setup>
import {
  getApiConfigCdnPortApi,
  updateApiConfigCdnPortApi
} from '@/apis/modules/config'

const formState = reactive({
  http: '',
  https: ''
})

const getPortConf = () => {
  getApiConfigCdnPortApi({}).then((res) => {
    formState.http = res.http?.join('\n')
    formState.https = res.https?.join('\n')
  })
}
function save() {
  const data = {
    http: formState.http?.split('\n').filter(Boolean),
    https: formState.https?.split('\n').filter(Boolean)
  }
  updateApiConfigCdnPortApi(data).then(() => {
    ToastUtils.success('保存成功')
  })
}
onMounted(() => {
  getPortConf()
})
</script>
<style lang="less" scoped>
.arco-alert {
  align-items: start;
  color: var(--color-text-2);
  :deep(.arco-alert-icon) {
    width: 16px;
    height: 22px;
    line-height: 22px;
  }
  :deep(.arco-alert-content) {
    line-height: 22px;
    font-size: 14px;
  }
}
</style>
